<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Contact us</title>
    <!--google fonts-->
    <link href="https://fonts.googleapis.com/css?family=PT+Serif|Open+Sans" rel="stylesheet">

    <!--font-awesome CDN-->
    <!--<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">-->
    <!--font-awesome-->
    <link href="styles/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="scss/utils/Main.css">
    <link rel="stylesheet" href="scss/utils/Client.css">

</head>
<body class="has-client-header has-client-nav has-client-footer">

<main role="main">
    <section class="section-blog-title">
        <div class="container">
            <div class="section-title col-xs-4">CONTACT US</div>
        </div>
    </section>

    <section class="section-contact">
        <div class="container">
            <h1>INFORMATION ABOUT US</h1>
            <h5>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</h5>
            <ul class="list-unstyled ul-contact">
                <li>
                    <div class="row">
                        <div class="col-xs-6 col-sm-4 col-md-3 col-sm-offset-1 col-md-offset-1 info-name">
                            <i class="fa fa-map-marker"></i> ADDRESS
                        </div>
                        <div class="col-xs-6 col-sm-7 col-md-8 list-info">
                            9606 North MoPac Expressway Suite 700 Austin, TX 78759
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-6 col-sm-4 col-md-3 col-sm-offset-1 col-md-offset-1 info-name">
                            <i class="fa fa-phone"></i> PHONE
                        </div>
                        <div class="col-xs-6 col-sm-7 col-md-8 list-info">
                            +1452-875-5585
                        </div>
                    </div>
                </li>
                <li>
                    <div class="row">
                        <div class="col-xs-6 col-sm-4 col-md-3 col-sm-offset-1 col-md-offset-1 info-name">
                            <i class="fa fa-envelope-o"></i> EMAIL
                        </div>
                        <div class="col-xs-6 col-sm-7 col-md-8 list-info">
                            haha@163.com
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </section>
    <section class="margin-footer">
        <div class="container">
            <div class="get-a-touch">
                <h2>Get in Touch</h2>
                <form action="" id="get_a_touch">
                    <fieldset class="row">
                        <div class="form-group col-xs-12">
                            <input type="text" class="form-control" name="name" placeholder="Name">
                        </div>
                        <div class="form-group col-xs-12 col-sm-6">
                            <input type="email" class="form-control" name="email" placeholder="E-mail">
                        </div>
                        <div class="form-group col-xs-12 col-sm-6">
                            <input type="text" class="form-control" name="subject" placeholder="Subject">
                        </div>
                        <div class="form-group col-xs-12">
                            <textarea name="message" class="form-control" rows="10" placeholder="Message"></textarea>
                        </div>
                        <div class="form-actions col-xs-12">
                            <button type="submit" class="btn btn-fill-default w100">SEND MESSAGE</button>
                        </div>
                    </fieldset>
                </form>
            </div>
        </div>
    </section>
</main>

<script src="lib/jquery.1.12.4.min.js"></script>
<script src="lib/bootstrap.min.js"></script>
<script src="lib/jquery.validate.min.js"></script>
<script src="scripts/index.js"></script>
<script>
    $(function($){
        validatorFormEasy({
            container:this,
            rules:{
                name:{
                    required:true
                },
                email:{
                    required:true,
                    email:true
                },
                subject:{
                    required:true
                },
                message:{
                    required:true
                }
            },
            callback:function(params){
                console.log(params);
                validator.resetForm();
                $("#get_a_touch")[0].reset();
            }
        });
    })
</script>
</body>
</html>